<template>
  <el-container class="product-page">
    <el-main>
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <h1>{{ $t('products.vacuumPackaging.title') }}</h1>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :md="12" :sm="24">
            <el-carousel height="400px" indicator-position="outside">
              <el-carousel-item v-for="(img, index) in productImages" :key="index">
                <el-image 
                  :src="img"
                  fit="contain"
                  :preview-src-list="productImages"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>

          <el-col :md="12" :sm="24">
            <div class="product-features">
              <h3>{{ $t('products.common.features') }}</h3>
              <el-divider />
              <ul class="feature-list">
                <li v-for="(feature, index) in features" :key="index">
                  <el-icon><Checked /></el-icon>
                  {{ $t(`products.vacuumPackaging.features.${index}`) }}
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <div class="technical-specs">
          <h3>{{ $t('products.common.specifications') }}</h3>
          <el-table :data="specifications" border style="width: 100%">
            <el-table-column 
              prop="parameter"
              :label="$t('products.common.parameter')"
              width="200"
            />
            <el-table-column 
              prop="value"
              :label="$t('products.common.value')"
            />
          </el-table>
        </div>

        <div class="contact-section">
          <el-button 
            type="primary" 
            size="large"
            @click="$router.push('/contact')"
          >
            <el-icon><Message /></el-icon>
            {{ $t('products.common.contactButton') }}
          </el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { Checked, Message } from '@element-plus/icons-vue'

const productImages = [
  '/assets/vacuum-packaging-1.jpg',
  '/assets/vacuum-packaging-2.jpg',
  '/assets/vacuum-packaging-3.jpg'
]

const features = Array(6).fill(null) // 对应多语言配置的6个特性

const specifications = [
  { parameter: 'material', value: 'PET/AL/PE' },
  { parameter: 'thickness', value: '80-200μm' },
  { parameter: 'sealStrength', value: '≥45N/15mm' },
  { parameter: 'temperature', value: '-40°C ~ 121°C' },
  { parameter: 'bagTypes', value: '3-side seal, stand-up, zipper' },
  { parameter: 'certification', value: 'FDA, ISO22000' }
]
</script>

<style scoped>
.product-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  text-align: center;
  padding: 20px 0;
}

.el-carousel {
  border-radius: 8px;
  overflow: hidden;
}

.feature-list {
  padding-left: 20px;
}

.feature-list li {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-section {
  margin-top: 30px;
  text-align: center;
  padding: 20px 0;
}

.technical-specs {
  margin-top: 30px;
}
</style>
